<template>
	<el-card>
		<div class="echartsTop">
			<div class="topTitle">{{ queryData.region }}日新增用户量</div>
			<el-form :inline="true" :model="queryData" class="demo-form-inline">
				<el-form-item label="查询时间">
					<el-select
						v-model="queryData.region"
						placeholder="请选择查询时间"
						style="width: 100px"
					>
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getPageData">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="echartsDom" style="width: 100%" ref="echartsDom"></div>
	</el-card>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { userStores } from '@/stores';
import { ref, onMounted, reactive } from 'vue';
import { getEcharts } from '@/utils/api';
const store = userStores();
const queryData: any = reactive({
	region: '7',
	date: [],
	data: [],
});
const options = [
	{
		label: '7日',
		value: '7',
	},
	{
		label: '15日',
		value: '15',
	},
	{
		label: '30日',
		value: '30',
	},
];
type EChartsOption = echarts.EChartsOption;
const echartsDom: any = ref(null);
var myChart: any = null;

var option: EChartsOption;
onMounted(() => {
	getPageData();
});
const getPageData = () => {
	getEcharts(queryData.region).then((res: any) => {
		queryData.date = res.data.date;
		queryData.data = res.data.data;
		setTimeout(() => {
			echartsDatas();
		}, 100);
	});
};
const echartsDatas = () => {
	if (myChart == null) {
		myChart = echarts.init(echartsDom.value);
	}

	option = {
		xAxis: {
			axisTick: {
				alignWithLabel: true,
			},
			type: 'category',
			data: queryData.date,
		},
		tooltip: {
			show: true,
			trigger: 'axis',
			axisPointer: {
				type: 'cross', // 坐标轴指示器类型：十字准线
			},
			// 自定义显示内容
			formatter: function (params: any) {
				return `${params[0].axisValue}日新增${params[0].value}人`;
			},
		},
		yAxis: {
			type: 'value',
		},
		series: [
			{
				data: queryData.data,
				type: 'line',
				smooth: true,
			},
		],
	};

	option && myChart.setOption(option);
	window.addEventListener('resize', function () {
		// console.log(myChart.value);
		myChart.resize();
	});
};
// });
const onSubmit = () => {};
// var chartDom = document.getElementById('main')!;

// setTimeout(() => {
// 	store.system.aaa = '321';
// }, 3000);
</script>
<style scoped>
.echartsDom {
	height: 400px;
}
.topTitle {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: bold;
}
</style>
